<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div class="content">
      <div class="mains">
        <p>CPU</p>
        <div id="dashboardHumidity" class="echart"></div>
      </div>
      <div class="main">
        <p>内存</p>
        <div
          id="dashboardHumiditys"
          class="echart"
          style="
            width: 220px;
            height: 280px;
            margin-top: -60px;
            margin-left: 20px;
          "
        ></div>
      </div>
      <div class="main">
        <p>存储</p>
        <div
          id="dashboardHumiditytwo"
          class="echart"
          style="
            width: 220px;
            height: 280px;
            margin-top: -60px;
            margin-left: 20px;
          "
        ></div>
      </div>
      <div class="main-ntp">
        <p class="pp">NTP服务</p>
        <h1>{{ dateTime }}</h1>
        <p class="p">
          <el-button type="primary">手动同步</el-button>
        </p>
        <p class="p">
          <el-checkbox v-model="checked"><h2>开启NTP服务</h2></el-checkbox>
        </p>
        <p class="p">
          <el-checkbox v-model="checkeds" @change="dialogVisible = true"
            ><h2>自动同步时间</h2></el-checkbox
          >
        </p>
      </div>
      <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="NTP服务地址">
            <el-input v-model="form.adress"></el-input>
          </el-form-item>
          <el-form-item label="同步间隔(秒)">
            <el-input v-model="form.second"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <div class="main-re">
        <p class="pp">热备</p>
        <p class="p">
          <svg
            t="1655646776198"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3174"
            width="100"
            height="100"
          >
            <path
              d="M149.33 917.33h341.33V106.67H149.33v810.66zM234.67 192h170.67v64H234.67v-64z m0 149.33h170.67V384H234.67v-42.67z m0 128h170.67V832H234.67V469.33zM533.33 106.67v810.67h341.33V106.67H533.33zM618.67 832V192h170.67v64H618.67v85.33h170.67V384H618.67v85.33h170.67V832H618.67z"
              p-id="3175"
              fill="#2c2c2c"
            ></path>
            <path
              d="M277.33 533.33h85.33v85.33h-85.33zM277.33 661.33h85.33v85.33h-85.33zM661.33 533.33h85.33v85.33h-85.33zM661.33 661.33h85.33v85.33h-85.33z"
              p-id="3176"
              fill="#2c2c2c"
            ></path>
          </svg>
        </p>

        <p class="p">
          <el-checkbox v-model="start"><h2>开启热备</h2></el-checkbox>
        </p>
      </div>
      <!-- <el-col :span="6">
        <div class="main-wan">
          <p>WAN接口</p>
          <div  class="main-content">
              <p>
                  <b>1.1Kbps</b>
              </p>
              <p>
                  <b>2.2Mbps</b>
              </p>
          </div>
          <div class="bottom">
              <p>上网流量</p>
          </div>
        </div>
      </el-col> -->
    </div>
    <div class="bottom">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple" style="width: 640px">
            <p>
              <span style="float: left">CPU内存</span>
              <el-date-picker
                style="float: left; margin-left: 20px"
                v-model="starttime"
                type="datetime"
                placeholder="选择开始日期时间"
              >
              </el-date-picker>
              <el-date-picker
                style="float: left; margin-left: 10px"
                v-model="endtime"
                type="datetime"
                placeholder="选择结束日期时间"
              >
              </el-date-picker>
              <el-button
                type="primary"
                style="float: left; margin-left: 10px"
                @click="searchTimebtn"
                >确定</el-button
              >
              <!-- <el-date-picker
                style="float:right;margin-right:10px"
                  @change="handleTtemClick"
                  v-model="searchTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期" 
                  size="small"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  >
                </el-date-picker> -->
            </p>
            <div class="echart" id="mychartcpu" style="margin-top: 35px"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple" style="width: 640px">
            <p>
              <span style="float: left">网络输入输出</span>
              <el-date-picker
                style="float: left; margin-left: 5px"
                v-model="starttimebegin"
                type="datetime"
                placeholder="选择开始日期时间"
              >
              </el-date-picker>
              <el-date-picker
                style="float: left; margin-left: 5px"
                v-model="endtimeend"
                type="datetime"
                placeholder="选择结束日期时间"
              >
              </el-date-picker>
              <el-button
                type="primary"
                style="float: left; margin-left: 5px"
                @click="searchTimebtnsure"
                >确定</el-button
              >
            </p>
            <div class="echart" id="mychartwan" style="margin-top: 35px"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { Mocharesource, MochareTime } from "@/api/api";
import moment from "moment";
export default {
  name: "App",
  data() {
    return {
      xData: [
        "17:44:38",
        "14:20:35",
        "14:21:45",
        "11:20:03",
        "16:14:35",
        "18:45:36",
        "17:45:06",
      ], //横坐标
      labelPosition: "top",
      yData: [23, 24, 18, 25, 27, 28, 25], //数据
      taskDate: [10, 11, 9, 17, 14, 13, 14],
      taskDates: [15, 14, 10, 7, 4, 3, 18],
      myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
      searchTime: [new Date(new Date().getTime() - 3600 * 1000), new Date()],
      // searchTimebtn:'',
      starttime: "",
      endtime: "",
      starttimebegin: "",
      endtimeend: "",
      chartPie: null,
      timeOutOne:null,//定时器
      // cpupresent:[],
      formInline: {
        user: "",
        region: "",
      },
      dateTime: "",
      checked: false,
      checkeds: false,
      dialogVisible: false,
      start: false,
      form: {
        adress: "",
        second: "",
      },
    };
  },
  created() {
  },
  mounted() {
    // this.timeOutOne=setInterval(() => {
    //   this.onload();
    // },2000)
    this.onload();
    this.initEchartsCpu(); ///CPU内存
    this.initEchartsWan(); //网络输入输出
    this.drawDev(); //CPU
    this.drawDevs(); //内存
    this.drawDevtwo(); //存储
    this.Time();
    this.Date();
    // this.searchTimebtn();
    // this.searchTimebtnsure();
  },
  // 销毁定时器
  destroyed() {
    clearInterval(this.timeOutOne);
    this.timeOutOne = null;
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    pickerOptions: {
      disabledDate(time) {
        let limit = Date.now() - 3600 * 1000 * 24 * 30;
        return time.getTime() > Date.now() || time.getTime() < limit; // 设置禁止选今天以后的日子
      },
    },
    //选择时间
    // searchTimebtn() {
    //   console.log(11);
    //   this.Timesubmit();
    // },
    onload() {
      Mocharesource("").then((res) => {
        res.data.present.forEach((item) => {
          console.log(item);
          if (item.resourcesType === 0) {
            console.log(item.resourcesType);
            this.cpupresent = item.resourcesoccupancy;
            console.log(this.cpupresent, 777);
          }
          if (item.resourcesType === 1) {
            console.log(item.resourcesType);
            this.cpupresentwo = item.resourcesoccupancy;
            console.log(this.cpupresentwo, 777);
          }
          if (item.resourcesType === 2) {
            console.log(item.resourcesType);
            this.cpupresenthree = item.resourcesoccupancy;
            console.log(this.cpupresenthree, 777);
          }
        });
        this.cpu = res.data.history.cpu;
        console.log(this.cpu);
        this.memory = res.data.history.memory;
        console.log(this.memory);
        this.resourcesDate = res.data.history.resourcesDate;
        let arr = [];
        res.data.history.resourcesDate.forEach((item) => {
          console.log(item);
          var d = new Date(item);
          var n = d.toLocaleTimeString();
          arr.push(n);
        });
        // this.resourcesDate.sort('')
        this.resourcesDate = arr;
        console.log(this.resourcesDate, "999999");
        this.reception = res.data.history.reception;
        console.log(this.reception);
        this.send = res.data.history.send;
        console.log(this.send);
        this.drawDev();
        this.drawDevs();
        this.drawDevtwo();
        this.initEchartsCpu();
        this.initEchartsWan();
      });
    },
    //获取当前年月日时分秒
    Date() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear() + "年",
        month: nowDate.getMonth() + 1 + "月",
        date: nowDate.getDate() + "日",
        hours: nowDate.getHours(),
        minutes: nowDate.getMinutes(),
        seconds: nowDate.getSeconds(),
      };

      const newmonth = date.month > 10 ? date.month : "0" + date.month;
      const newday = date.date;
      // const newminutes = date.minutes > 10 ? date.minutes : "0" + date.minutes;
      // const newseconds = date.seconds > 10 ? date.seconds : "0" + date.seconds;
      const newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
      const newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;

      this.dateTime =
        date.year +
        "-" +
        newmonth +
        "-" +
        newday +
        " " +
        date.hours +
        ":" +
        newminutes +
        ":" +
        newseconds;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    Time() {
      setInterval(() => {
        this.seconds -= 1;
        this.Date();
      }, 1000);
    },
    //CPU
    drawDev() {
      console.log(this.cpupresent);
      // const arr =this.cpupresent;
      // console.log(arr);
      // const arr =this.cpupresent;

      // console.log(arr);
      // let arrs = arr.map(item=>({
      //   value:item.resourcesoccupancy
      // }))
      //  // 多列柱状图
      // console.log(arrs)
      const mulColumnZZTData = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        toolbox: {
          show: false,
          feature: {
            restore: {},
            saveAsImage: {},
          },
        },
        // 配置
        series: [
          {
            name: "温度",
            type: "gauge",
            // axisLabel: { distance: 0, fontWeight: 100, shadowOffsetY: 100,height: 100},
            axisLine: {
              lineStyle: {
                width: 10, // 修改仪表盘宽度的属性
              },
            },
            max: 100,
            title: { offsetCenter: [0, "85%"], color: "red" },
            detail: {
              formatter: "{value}%",
              offsetCenter: [0, "65%"],
              fontStyle: "oblique",
              fontSize: 18,
            },
            pointer: { width: 8 },
            data: [{ value: this.cpupresent, name: "CPU" }],
          },
        ],
      };
      const dashboardHumidity = echarts.init(
        document.getElementById("dashboardHumidity")
      );
      dashboardHumidity.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        dashboardHumidity.resize();
      });
    },
    //内存
    drawDevs() {
      // 多列柱状图
      const mulColumnZZTData = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        toolbox: {
          show: false,
          feature: {
            restore: {},
            saveAsImage: {},
          },
        },
        // 配置
        series: [
          {
            name: "温度",
            type: "gauge",
            // axisLabel: { distance: 0, fontWeight: 100, shadowOffsetY: 100,height: 100},
            axisLine: {
              lineStyle: {
                width: 10, // 修改仪表盘宽度的属性
              },
            },
            title: { offsetCenter: [0, "85%"], color: "red" },
            detail: {
              formatter: "{value}%",
              offsetCenter: [0, "65%"],
              fontStyle: "oblique",
              fontSize: 18,
            },
            pointer: { width: 8 },
            data: [{ value: this.cpupresentwo, name: "内存" }],
          },
        ],
      };
      const dashboardHumiditys = echarts.init(
        document.getElementById("dashboardHumiditys")
      );
      dashboardHumiditys.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        dashboardHumiditys.resize();
      });
    },
    //存储
    drawDevtwo() {
      // 多列柱状图
      const mulColumnZZTData = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        toolbox: {
          show: false,
          feature: {
            restore: {},
            saveAsImage: {},
          },
        },
        // 配置
        series: [
          {
            name: "温度",
            type: "gauge",
            // axisLabel: { distance: 0, fontWeight: 100, shadowOffsetY: 100,height: 100},
            axisLine: {
              lineStyle: {
                width: 10, // 修改仪表盘宽度的属性
              },
            },
            title: { offsetCenter: [0, "85%"], color: "red" },
            detail: {
              formatter: "{value}%",
              offsetCenter: [0, "65%"],
              fontStyle: "oblique",
              fontSize: 18,
            },
            pointer: { width: 8 },
            data: [{ value: this.cpupresenthree, name: "存储" }],
          },
        ],
      };
      const dashboardHumiditytwo = echarts.init(
        document.getElementById("dashboardHumiditytwo")
      );
      dashboardHumiditytwo.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        dashboardHumiditytwo.resize();
      });
    },
    searchTimebtn() {
      var arrbegin = moment(this.starttime).format("YYYY-MM-DD HH:mm:ss");
      // console.log(arrbegin);
      var arrend = moment(this.endtime).format("YYYY-MM-DD HH:mm:ss");
      const params = {
        starttime: arrbegin,
        endtime: arrend,
      };
      var b = new Date(arrbegin);
      var c = new Date(arrend);
      if (c.getMinutes() - b.getMinutes() <= 2) {
        // this.$message.success("修改成功");
        MochareTime(params).then((res) => {
          console.log(res);
          this.cpu = res.data.history.cpu;
          this.memory = res.data.history.memory;
          this.resourcesDate = res.data.history.resourcesDate;
          let arr = [];
          res.data.history.resourcesDate.forEach((item) => {
            console.log(item);
            var d = new Date(item);
            var n = d.toLocaleTimeString();
            arr.push(n);
          });
          this.resourcesDate = arr.sort();
          this.reception = res.data.history.reception;
          this.send = res.data.history.send;
          const mulColumnZZTData = {
            title: {
              // text: 'Stacked Line'
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999",
                },
              },
              formatter: function (params) {
                var relVal = params[0].name;
                for (var i = 0, l = params.length; i < l; i++) {
                  relVal += "<br/>" + params[i].marker + params[i].value + "%";
                }
                return relVal;
              },
            },
            legend: {
              data: ["cpu", "内存"],
            },
            dataZoom: [
              {
                type: "slider",
                show: true,
                start: 0,
                end: 50,
                handleSize: 8,
              },
              {
                type: "inside",
                start: 0,
                end: 50,
              },
            ],
            xAxis: {
              type: "category",
              data: this.resourcesDate,
              axisLabel: {
                //x轴文字的配置
                show: true,
                interval: 0, //使x轴文字显示全
                rotate: 30,
              },
            },
            yAxis: {
              type: "value",
              axisLabel: {
                formatter: "{value}%",
              },
            },
            series: [
              {
                name: "cpu",
                type: "line",
                // stack: 'Total',
                data: this.cpu,
                label: {
                  normal: {
                    show: true,
                    position: "outside",
                    formatter: "{c}%", // 这里是数据展示的时候显示的数据
                  },
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                    },
                  },
                },
              },
              {
                name: "内存",
                type: "line",
                // stack: 'Total',
                data: this.memory,
                label: {
                  normal: {
                    show: true,
                    position: "outside",
                    formatter: "{c}%", // 这里是数据展示的时候显示的数据
                  },
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                    },
                  },
                },
              },
            ],
          };
          const myChartcpu = echarts.init(
            document.getElementById("mychartcpu")
          );
          myChartcpu.setOption(mulColumnZZTData);
          //随着屏幕大小调节图表
          window.addEventListener("resize", () => {
            myChartcpu.resize();
          });
        });
      } else {
        this.$message.warning("超出可选时间,时间在两分钟以内!!!");
      }
    },
    // theTimerOne(resourcesDate) {
    //   this.timeOutOne = setInterval(() => {
    //     if (this.mulColumnZZTData.dataZoom[0].endValue >= resourcesDate.length) {
    //       // clearInterval(this.timeOutOne);
    //       // this.drawLine();
    //       this.mulColumnZZTData.dataZoom[0].endValue = 9;
    //       this.mulColumnZZTData.dataZoom[0].startValue = 0;
    //     } else {
    //       this.mulColumnZZTData.dataZoom[0].endValue = this.mulColumnZZTData.dataZoom[0].endValue + 1;
    //       this.mulColumnZZTData.dataZoom[0].startValue = this.mulColumnZZTData.dataZoom[0].startValue + 1;
    //     }
    //     this.leftBottomLeftPartChart.setOption(this.mulColumnZZTData);
    //   }, 2000);
    // },
    //CPU内存
    initEchartsCpu() {
      // 多列柱状图
      const mulColumnZZTData = {
        title: {
          // text: 'Stacked Line'
        },
        legend: {
          data: ["cpu", "内存"],
        },
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true
        // },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
          formatter: function (params) {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal 
              += "<br/>" + params[i].marker + params[i].value + "%";
            }
            return relVal;
          },
        },
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 0,
            end: 50,
            handleSize: 8,
          },
          {
            type: "inside",
            start: 0,
            end: 50,
          },
        ],
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: this.resourcesDate,
          axisLabel: {
            //x轴文字的配置
            show: true,
            interval: 0, //使x轴文字显示全
            rotate: 30,
            // interval: (index, value) => {
            //   //具体逻辑判断
            //   if (value.indexOf("00") !== -1)
            //     return true
            //   return false
            // }
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}%",
          },
        },
        // dataZoom: [
        //   //滑动条
        //   {
        //     xAxisIndex: 0, //这里是从X轴的0刻度开始
        //     show: false, //是否显示滑动条，不影响使用
        //     type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        //     startValue: 0, // 从头开始。
        //     endValue: 9 // 一次性展示10个。
        //   }
        // ],
        series: [
          {
            name: "cpu",
            type: "line",
            // stack: 'Total',
            data: this.cpu,
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{c}%", // 这里是数据展示的时候显示的数据
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
              },
            },
          },
          {
            name: "内存",
            type: "line",
            // stack: 'Total',
            data: this.memory,
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{c}%", // 这里是数据展示的时候显示的数据
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
              },
            },
          },
        ],
      };
      const myChartcpu = echarts.init(document.getElementById("mychartcpu"));
      myChartcpu.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChartcpu.resize();
      });
    },
    searchTimebtnsure() {
      var arrbegin = moment(this.starttimebegin).format("YYYY-MM-DD HH:mm:ss");
      // console.log(arrbegin);
      var arrend = moment(this.endtimeend).format("YYYY-MM-DD HH:mm:ss");
      const params = {
        starttimebegin: arrbegin,
        endtimeend: arrend,
      };
      var b = new Date(arrbegin);
      var c = new Date(arrend);
      if (c.getMinutes() - b.getMinutes() <= 2) {
        MochareTime(params).then((res) => {
          console.log(res);
          this.cpu = res.data.history.cpu;
          this.memory = res.data.history.memory;
          this.resourcesDate = res.data.history.resourcesDate;
          let arr = [];
          res.data.history.resourcesDate.forEach((item) => {
            console.log(item);
            var d = new Date(item);
            var n = d.toLocaleTimeString();
            arr.push(n);
          });
          this.resourcesDate = arr.sort();
          this.reception = res.data.history.reception;
          this.send = res.data.history.send;
          const mulColumnZZTData = {
            title: {
              // text: 'Stacked Line'
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999",
                },
              },
              formatter: function (params) {
                var relVal = params[0].name;
                for (var i = 0, l = params.length; i < l; i++) {
                  relVal += "<br/>" + params[i].marker + params[i].value + "%";
                }
                return relVal;
              },
            },
            legend: {
              data: ["输入", "输出"],
            },
            dataZoom: [
              {
                type: "slider",
                show: true,
                start: 0,
                end: 50,
                handleSize: 8,
              },
              {
                type: "inside",
                start: 0,
                end: 50,
              },
            ],
            xAxis: {
              type: "category",
              axisLabel: {
                //x轴文字的配置
                show: true,
                interval: 0, //使x轴文字显示全
                rotate: 30,
              },
              // boundaryGap: false,
              data: this.resourcesDate,
            },
            yAxis: {
              type: "value",
              axisLabel: {
                formatter: "{value}%",
              },
            },
            series: [
              {
                name: "输入",
                type: "line",
                // stack: 'Total',
                data: this.reception,
                label: {
                  normal: {
                    show: true,
                    position: "outside",
                    formatter: "{c}%", // 这里是数据展示的时候显示的数据
                  },
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                    },
                  },
                },
                // axisLine: {
                //   formatter: "{value}KB/S",
                // },
              },
              {
                name: "输出",
                type: "line",
                // stack: 'Total',
                data: this.send,
                label: {
                  normal: {
                    show: true,
                    position: "outside",
                    formatter: "{c}%", // 这里是数据展示的时候显示的数据
                  },
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                    },
                  },
                },
                // axisLine: {
                //   formatter: "{value}KB/S",
                // },
              },
            ],
          };
          const myChartwan = echarts.init(
            document.getElementById("mychartwan")
          );
          myChartwan.setOption(mulColumnZZTData);
          //随着屏幕大小调节图表
          window.addEventListener("resize", () => {
            myChartwan.resize();
          });
        });
      } else {
        this.$message.warning("超出可选时间,时间在两分钟以内!!!");
      }
    },
    //网络输入输出
    initEchartsWan() {
      // 多列柱状图
      const mulColumnZZTData = {
        title: {
          // text: 'Stacked Line'
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
          formatter: function (params) {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal += "<br/>" + params[i].marker + params[i].value + "%";
            }
            return relVal;
          },
        },
        legend: {
          data: ["输入", "输出"],
        },
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true
        // },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 0,
            end: 50,
            handleSize: 8,
          },
          {
            type: "inside",
            start: 0,
            end: 50,
          },
        ],
        xAxis: {
          type: "category",
          axisLabel: {
            //x轴文字的配置
            show: true,
            interval: 0, //使x轴文字显示全
            rotate: 30,
          },
          // boundaryGap: false,
          data: this.resourcesDate,
        },
        yAxis: {
          type: "value",
          axisLine: {
            formatter: "{value}KB/S",
          },
        },
        series: [
          {
            name: "输入",
            type: "line",
            // stack: 'Total',
            data: this.reception,
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{c}%", // 这里是数据展示的时候显示的数据
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
              },
            },
            // axisLine: {
            //   formatter: "{value}KB/S",
            // },
          },
          {
            name: "输出",
            type: "line",
            // stack: 'Total',
            data: this.send,
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{c}%", // 这里是数据展示的时候显示的数据
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
              },
            },
            // axisLine: {
            //   formatter: "{value}KB/S",
            // },
          },
        ],
      };
      const myChartwan = echarts.init(document.getElementById("mychartwan"));
      myChartwan.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChartwan.resize();
      });
    },
  },
  components: {},
};
</script>

<style lang="less" scoped>
.content {
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  // .bg-purple {
  //   width: 260.7px;
  //   height: 240px;
  //   border: 1px solid black;
  //   margin-left: 10px;
  //   display: inline-block;
  //   // background: #d3dce6;
  // }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .main-wan {
    width: 310px;
    height: 240px;
    border-radius: 4px;
    // border: 1px solid black;
    background-color: #39b6ef;
    color: white;
    h2 {
      padding-top: 20px;
      padding-left: 20px;
    }
    p {
      padding-top: 20px;
      padding-left: 20px;
      // margin-bottom: 1px solid black;
      // border-bottom: 1px solid black;
    }
    .info {
      padding-top: 20px;
      padding-left: 20px;
      // margin-bottom: 1px solid black;
      border-bottom: 1px solid black;
    }
    .bottom {
      width: 311px;
      background-color: white;
      color: black;
      margin-left: -1px;
      height: 75px;
      text-align: center;
    }
  }
  .mains {
    width: 250px;
    height: 240px;
    // margin-left: -10px;
    // margin-top: -20px!important;
    border-radius: 4px;
    float: left;
    border: 1px solid black;
    h2 {
      padding-top: 20px;
      padding-left: 20px;
    }
    p {
      padding-top: 20px;
      padding-left: 20px;
      // margin-bottom: 1px solid black;
      // border-bottom: 1px solid black;
    }
    .echart {
      width: 220px;
      height: 280px;
      margin-top: -60px;
      margin-left: 20px;
    }
    .info {
      padding-top: 20px;
      padding-left: 20px;
      // margin-bottom: 1px solid black;
      border-bottom: 1px solid black;
    }
    .button {
      float: right;
    }
  }
  .main-ntp {
    width: 253px;
    height: 240px;
    margin-left: 10px;
    float: left;
    border-radius: 4px;
    border: 1px solid black;
    h1 {
      padding-top: 0px;
      text-align: center;
    }
    .el-button {
      width: 240px;
      text-align: center;
      // margin-left: 20%;
    }
    .pp {
      padding-top: 20px;
      padding-left: 20px;
      // margin-bottom: 1px solid black;
      // border-bottom: 1px solid black;
    }
    .p {
      text-align: center;
    }
    .el-checkbox {
      text-align: center;
    }
  }
  .main-re {
    width: 253px;
    height: 240px;
    margin-left: 10px;
    float: left;
    border-radius: 4px;
    border: 1px solid black;
    h1 {
      padding-top: 0px;
      text-align: center;
    }
    .el-button {
      width: 240px;
      text-align: center;
      // margin-left: 20%;
    }
    .pp {
      padding-top: 20px;
      padding-left: 20px;
      // margin-bottom: 1px solid black;
      // border-bottom: 1px solid black;
    }
    .p {
      text-align: center;
    }
    .el-checkbox {
      text-align: center;
    }
  }
  .main {
    width: 253px;
    height: 240px;
    margin-left: 10px;
    float: left;
    border-radius: 4px;
    border: 1px solid black;
    // background: #e5e9f2;
    h2 {
      padding-top: 20px;
      padding-left: 20px;
    }
    p {
      padding-top: 20px;
      padding-left: 20px;
      // margin-bottom: 1px solid black;
      // border-bottom: 1px solid black;
    }
    .echart {
      width: 200px;
      height: 280px;
      margin-top: -60px;
    }
    .info {
      padding-top: 20px;
      padding-left: 20px;
      // margin-bottom: 1px solid black;
      border-bottom: 1px solid black;
    }
    .button {
      float: right;
    }
  }
  .maintop {
    width: 460px;
    height: 170px;
    // margin-top: 10px;
    border: 1px solid black;
    h2 {
      padding-top: 5px;
      padding-left: 5px;
    }
    p {
      padding-top: 5px;
      padding-left: 5px;
      // margin-bottom: 1px solid black;
      // border-bottom: 1px solid black;
    }
    .info {
      padding-top: 5px;
      padding-left: 5px;
      // margin-bottom: 1px solid black;
      border-bottom: 1px solid black;
    }
    .button {
      float: right;
    }
  }
  .maintops {
    width: 460px;
    height: 278px;
    margin-top: 10px;
    border: 1px solid black;
    // h2{
    //   padding-top: 5px;
    //   padding-left: 5px;
    // }
    // p{
    //   padding-top: 5px;
    //   padding-left: 5px;
    //   margin-bottom: 1px solid black;
    //   border-bottom: 1px solid black;
    // }
    .info {
      padding-top: 5px;
      padding-left: 5px;
      // margin-bottom: 1px solid black;
      border-bottom: 1px solid black;
    }
    .button {
      float: right;
    }
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
}
.bottom {
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    // background: #d3dce6;
    border: 1px solid black;
  }

  .grid-content {
    margin-top: 10px;
    height: 360px;
    border-radius: 4px;
    min-height: 36px;
    p {
      padding-top: 20px;
      padding-left: 20px;
    }
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .echart {
    // margin-top: 40px;
    width: 660px;
    height: 300px;
  }
}
</style>
